<template>
<div>
    <el-row :gutter="20">
        <el-col :span="3"><div class="grid-content"></div></el-col>
        <el-col :span="18">
            <div class="grid-content bg-purple">
                <div class="keys" style="float: left">

                </div>
                <div class="keys1" style="float: left">

                </div>
            </div>
        </el-col>
        <el-col :span="3"><div class="grid-content"></div></el-col>
    </el-row>

</div>
</template>

<script>
    export default {
        name: "ListeningFriend"
    }
</script>

<style scoped>
    .keys
    {
        width:10px;
        height:500px;
        background: aquamarine;
        animation:myfirst 8s;
        -moz-animation:myfirst 8s; /* Firefox */
        -webkit-animation:myfirst 8s; /* Safari and Chrome */
        -o-animation:myfirst 8s; /* Opera */
    }

    @keyframes myfirst
    {
        0%   {background: #8cc5ff}
        10%  {background:#BA55D3;}
        20%  {background:#90EE90;}
        30% {background:#ADADAD;}
        40% {background:#8B0000;}
        50% {background:#FF34B3;}
        60% {background:#CAFF70;}
        70% {background:#1C86EE;}

    }

    .keys1
    {
        width:30px;
        height:500px;
        background: blueviolet;
        animation:myfirst1 5s;
        -moz-animation:myfirst 5s; /* Firefox */
        -webkit-animation:myfirst 5s; /* Safari and Chrome */
        -o-animation:myfirst 5s; /* Opera */
    }

    @keyframes myfirst1
    {
        0%   {background: #8B0000}
        25%  {background:#BA55D3;}
        50%  {background:#90EE90;}
        100% {background:#1C86EE;}

    }
</style>
